@import "~antd/lib/style/themes/default.less";
@import "~@/utils/utils.less";

.cardBody {
	:global {
		.ant-card-body {
			padding: 12px;
		}
	}
}

.cardList {
	margin-bottom: -24px;

	.card {
		position: relative;
		height: 185px;
		margin-bottom: 20px;

		.top {
			width: 96%;
			height: 185px;
			background: #2b47e6;
			border: 2px solid #ffffff;
			opacity: 0.16;
			border-radius: 16px;
			position: absolute;
			left: 2%;
		}

		.content {
			position: absolute;
			top: 10px;
			width: 100%;
			border: 0px solid #ffffff;
			background: linear-gradient(-45deg,
					#eff1ff 0%,
					#f9fafd 48%,
					#eff1ff 100%);
			border-radius: 4px;
			padding: 28px;

			.title {
				display: flex;
				width: 100%;

				.info {
					padding-left: 13px;
					width: calc(100% - 48px);

					.name {
						font-weight: bold;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						text-overflow: ellipsis;
					}

					.desc {
						font-size: 13px;
						color: #666666;
						margin-top: 9px;
					}
				}
			}

			.footer {
				text-align: right;

				a {
					background: #ffffff;
					border-radius: 14px;
					color: #666666;
					font-size: 13px;
					display: inline-block;
					text-align: center;
					padding: 6px 12px;
					margin: 0 5px;

					&:hover {
						background: #19c3f3;
						box-shadow: 0px 2px 5px 0px rgba(25, 195, 243, 0.35);
						color: #ffffff;
					}
				}
			}
		}

		:global {
			.ant-card-meta-title {
				margin-bottom: 12px;


				&>a {
					display: inline-block;
					max-width: 250px;
					color: @heading-color;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.ant-card-actions {
				background: #f7f9fa;
			}

			.ant-card-body:hover {
				.ant-card-meta-title>a {
					color: @primary-color;
				}
			}
		}
	}

	.cardItem {
		position: relative;
		// min-width: 364px;
		border-radius: 5px 5px 2px 2px;

		:global {
			.ant-card-body {
				background: #F2F3F5;
			}

			.ant-card-meta {
				display: flex;
				align-items: center;
			}

			.ant-card-meta-title {
				// line-height: 80px;
				margin: 32px 0px 22px;

				&>a {
					display: inline-block;
					max-width: 250px;
					font-weight: bold;
					color: #FFFFFF !important;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.ant-card-meta-description {
				position: absolute;
				top: 0px;
				right: 0px;
				color: #FFFFFF;
			}

			.ant-avatar-string {
				height: 48px;
				display: flex;
				align-items: center;
			}

			.ant-card-actions {
				background: #F6F6F6;

				a {
					font-weight: 500;
					color: #666666;
				}
			}

			.ant-card-body:hover {
				.ant-card-meta-title>a {
					color: @primary-color;
				}
			}
		}
	}

	.item {
		padding: 3px 15px;
		border: 1px solid;
		border-radius: 0 0 0 40px;
	}

	.card_0 {
		&:nth-child(1) {
			.top {
				background: #19C3F3;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/rs.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E3F9FF 0%, #FAFEFF 48%, #EDFBFF 100%);

				.title {
					.cardAvatar {
						background: #19C3F3;
					}
				}
			}
		}
	}

	.card_1 {
		&:nth-child(1) {
			.top {
				background: #2B47E6;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/xz.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #EFF1FF 0%, #F9FAFD 48%, #EFF1FF 100%);

				.title {
					.cardAvatar {
						background: #2B47E6;
					}
				}
			}
		}
	}

	// .card_2 {
	// 	&:nth-child(1) {
	// 		.top {
	// 			background: #0076FE;
	//          display: none;
	// 		}
	// 		.content {
	// 			background: linear-gradient(-45deg, #E8F2FE 0%, #F6F9FD 48%, #E8F2FE 100%);
	// 			.title {
	// 				.cardAvatar {
	// 					background: #0076FE;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	.card_2 {
		&:nth-child(1) {
			.top {
				background: #FF7300;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/it.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #FFF6EE 0%, #FDFAF8 48%, #FFF6EE 100%);

				.title {
					.cardAvatar {
						background: #FF7300;
					}
				}
			}
		}
	}

	.card_3 {
		&:nth-child(1) {
			.top {
				background: #3affcf;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/sb.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E1F3EE 0%, #FAFFFE 48%, #E1F3EE 100%);

				.title {
					.cardAvatar {
						background: #08D19F;
					}
				}
			}
		}
	}

	.card_4 {
		&:nth-child(1) {
			.top {
				background: #3affcf;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/sb.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E1F3EE 0%, #FAFFFE 48%, #E1F3EE 100%);

				.title {
					.cardAvatar {
						background: #08D19F;
					}
				}
			}
		}
	}

	.card_4 {
		&:nth-child(1) {
			.top {
				background: #3affcf;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/my5.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E1F3EE 0%, #FAFFFE 48%, #E1F3EE 100%);

				.title {
					.cardAvatar {
						background: #08D19F;
					}
				}
			}
		}
	}

	.cardMy_0 {
		&:nth-child(1) {
			.top {
				background: #19C3F3;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/my1.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E3F9FF 0%, #FAFEFF 48%, #EDFBFF 100%);

				.title {
					.cardAvatar {
						background: #19C3F3;
					}
				}
			}
		}
	}

	.cardMy_1 {
		&:nth-child(1) {
			.top {
				background: #2B47E6;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/my2.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #EFF1FF 0%, #F9FAFD 48%, #EFF1FF 100%);

				.title {
					.cardAvatar {
						background: #2B47E6;
					}
				}
			}
		}
	}

	.cardMy_2 {
		&:nth-child(1) {
			.top {
				background: #FF7300;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/my3.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #FFF6EE 0%, #FDFAF8 48%, #FFF6EE 100%);

				.title {
					.cardAvatar {
						background: #FF7300;
					}
				}
			}
		}
	}

	.cardMy_3 {
		&:nth-child(1) {
			.top {
				background: #3affcf;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/my4.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E1F3EE 0%, #FAFFFE 48%, #E1F3EE 100%);

				.title {
					.cardAvatar {
						background: #08D19F;
					}
				}
			}
		}
	}

	.cardMy_4 {
		&:nth-child(1) {
			.top {
				background: #3affcf;
				display: none;
			}

			:global(.ant-card-body) {
				background-image: url("../../assets/sysImages/my5.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center center;
				padding-left: 5%;
			}

			.content {
				background: linear-gradient(-45deg, #E1F3EE 0%, #FAFFFE 48%, #E1F3EE 100%);

				.title {
					.cardAvatar {
						background: #08D19F;
					}
				}
			}
		}
	}

	:global {
		.ant-list .ant-list-item-content-single {
			max-width: 100%;
		}

		.ant-list-pagination {
			margin: 5px 0 30px;
		}
	}

	.add {
		position: relative;
		height: 185px;

		.top {
			width: 96%;
			height: 185px;
			background: #eeeeee;
			border: 2px solid #ffffff;
			opacity: 0.16;
			border-radius: 16px;
			position: absolute;
			left: 2%;
		}

		.content {
			position: absolute;
			top: 10px;
			width: 100%;
			border: 2px solid #ffffff;
			background: #ffffff;
			border-radius: 16px;
			padding: 28px;
			height: 185px;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 37px;
				cursor: pointer;

				.cardAvatar {
					background: #cccccc;
				}

				.info {
					margin-left: 13px;
				}
			}
		}
	}
}

.extraImg {
	width: 195px;
	margin-top: -60px;
	text-align: center;

	img {
		width: 100%;
	}
}

.newButton {
	width: 100%;
	height: 188px;
	color: @text-color-secondary;
	background-color: #fff;
	border-color: @border-color-base;
	border-radius: @border-radius-sm;
}

.cardAvatar {
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background: #2b47e6;
	border-radius: 48px;
}

.cardDescription {
	.textOverflowMulti();
}

.pageHeaderContent {
	position: relative;
}

.contentLink {
	margin-top: 16px;

	a {
		margin-right: 32px;

		img {
			width: 24px;
		}
	}

	img {
		margin-right: 8px;
		vertical-align: middle;
	}
}

@media screen and (max-width: @screen-lg) {
	.contentLink {
		a {
			margin-right: 16px;
		}
	}
}

@media screen and (max-width: @screen-md) {
	.extraImg {
		display: none;
	}
}

@media screen and (max-width: @screen-sm) {
	.pageHeaderContent {
		padding-bottom: 30px;
	}

	.contentLink {
		position: absolute;
		bottom: -4px;
		left: 0;
		width: 1000px;

		a {
			margin-right: 16px;
		}

		img {
			margin-right: 4px;
		}
	}
}

.icon {
	margin: 0 5px;
}

.referBgBox {
	background-image: url("../../assets/sysImages/referBg.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #000000;
}
@media screen and (max-width: 1024px) {
	.cardItem{
    min-width: 250px !important;
  }
}